#@layout(_res.get("loginPage"))

# define css()
<style>
    .loginContent {
        width: 40%;
        height: 527px;
        float: right;
        margin: 0px 30px;
        background-color: #ffffff;
    }

    .elem-field {
        height: 90%;
        border: 2px solid #e2e2e2;
        margin: 20px;
    }

    .field-box {
        padding: 40px;
    }

    .loginBtu {
        padding: 5px 0;
    }

    .loginBtu button {
        margin: 5px auto;
    }

    .loginBanner {
        float: left;
        margin-left: 30px;
        width: 40%;
    }

    .loginBanner img {
        max-width: 100%;
        height: auto;
        width: auto \9; /* ie8 */
    }

    @media screen and (max-width: 927px) {
        .loginBanner {
            display: none;
        }

        .elem-field {
            margin: 0 20px;
        }

        .loginContent {
            width: 420px;
            margin: 0 auto;
            float: none;
            padding-top: 20px;
        }
    }

    @media screen and (max-width: 480px) {
        .loginContent {
            width: 100%;
        }
    }

</style>
#end

#define main()
<div class="loginBanner ">
    <img class="layui-radius" src="/img/login-banner.png">
</div>
<div class="loginContent layui-radius">
    #@login()
</div>
#end

#define login()
<fieldset class="elem-field layui-elem-field">
    <legend>#(_res.get("MyWebApp.Login.signUp"))</legend>
    <div class="field-box layui-field-box">
        <form class="layui-form layui-form-pane" action="/userlogin/registerSubmit" method="post">
            <div class="layui-form-item layui-radius">
                <label class="layui-form-label">#(_res.get("email"))</label>
                <div class="layui-input-block">
                    <input type="text" name="user.user_email" required lay-verify="email" placeholder='#(_res.get("enterEmail"))'
                           autocomplete="on" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-radius">
                <label class="layui-form-label">#(_res.get("pass"))</label>
                <div class="layui-input-block">
                    <input type="password" id="pwd" name="passWord" required lay-verify="pass" placeholder='#(_res.get("enterPass"))'
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-radius">
                <label class="layui-form-label">#(_res.get("pass"))</label>
                <div class="layui-input-block">
                    <input type="password" name="passWord_2" required lay-verify="regPwd" placeholder='#(_res.get("enterPassTwo"))'
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="loginBtu layui-input-block">
                    <button lay-submit class="layui-btn  layui-btn-radius" lay-filter="submitBtu">#(_res.get("MyWebApp.Login.signUp.register"))</button>
                    <button type="reset" class="layui-btn  layui-btn-primary layui-btn-radius">#(_res.get("reset"))</button>
                </div>
            </div>
        </form>
        <hr style="margin: 25px auto">
        #(_res.get("third-party"))--Null
        <br>
        <br>
        #(_res.get("existingAccount"))&nbsp;&nbsp;<a href="/userlogin/login" class="layui-btn layui-btn-mini layui-btn-radius layui-btn-normal">#(_res.get("MyWebApp.Login.signIn"))</a>
    </div>
</fieldset>
#end


#define js()
<script>
    layui.use(['form','jquery','layer'], function () {
        var $=layui.jquery;
        var form = layui.form();
        var layer=layui.layer;
        form.verify({
            regPwd: function(value){
                var pwd = $("#pwd").val();
                if(!new RegExp(pwd).test(value)){
                    return '#(_res.get("MyWebApp.User.ErrorMsg.PassDiffer"))';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'#(_res.get("MyWebApp.User.ErrorMsg.PwdError"))'
            ]
        });
        form.on('submit(submitBtu)',function(data){
            var action=$(data.form).attr("action");
            var method=$(data.form).attr("method");
            $.ajax({
                url:action,
                type:method,
                async:false,
                data:data.field,
                dataType:'json',
                success:function (json) {
                    if(json.code==0){
                    window.location.href=json.data;
                    }else{
                        layer.msg(json.msg, {icon: 5});
                    }
                },
                error:function () {
                    layer.msg('#(_res.get("MyWebApp.Login.signUp.Error"))', {icon: 5});
                }
            });
            return false;
        });
    });

</script>
#end